<template>
	<view class="confirmOrderPage">
		<view class="goods-wrapper">
			<view class="express-type-wrapper">
				<view class="express-type" v-show="expressType == 'express'">
					<image class="address-bgimg" mode="scaleToFill" src="../../static/goods/address_bg.png"></image>
					<view class="titles">
						<view class="ltitle">邮寄</view>
						<view class="rtitle" @click="setExpressType('self')">自提</view>
					</view>
					<view class="address"  @click="goAddress">
						<image class="address-icon" mode="scaleToFill" src="../../static/goods/location_icon.png">
						</image>
						<view class="address-desc" v-if="address">
							<view class="desc-text">{{address.name}} {{address.mobile}}</view>
							<view class="desc-text">{{address.address}}</view>
						</view>
						<view class="address-desc" v-else>
							<view class="desc-text">你还没有收货地址</view>
							<view class="desc-text">点击前往设置</view>
						</view>
						<view class="icon-box">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<view class="express-type self-lift" v-show="expressType == 'self'">
					<image class="address-bgimg" mode="scaleToFill" src="../../static/goods/address_bg_right.png"></image>
					<view class="titles">
						<view class="ltitle" @click="setExpressType('express')">邮寄</view>
						<view class="rtitle">自提</view>
					</view>
					<view class="address">
						<image class="address-icon" mode="scaleToFill" src="../../static/goods/location_icon.png">
						</image>
						<view class="address-desc address-self">
							<view class="desc-text">自提点: {{selfLiftAddress.value}}</view>
							<view class="desc-text">联系电话: {{selfLiftInfo.mobile}} <u-icon name="edit-pen" size="20" color="#333333" @click="editAddress('mobile')"></u-icon></view>
							<view class="desc-text">提货人姓名: {{selfLiftInfo.consignee}} <u-icon name="edit-pen" size="20" color="#333333" @click="editAddress('consignee')"></u-icon></view>
						</view>
						<view class="icon-box">
							<!-- <u-icon name="arrow-right"></u-icon> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="goods-box">
				<view class="g-item">
					<image
						:src="productInfo.productImage || goodsInfo.picUrl">
					</image>
					<view class="right">
						<text class="title clamp">{{goodsInfo.name}}</text>
						<view class="spec">{{ productInfo.specifications ? productInfo.specifications.join(' ') : ''}}</view>
						<view class="price-box">
							<view class="goods-price">
								<text>{{productInfo.sellPrice}}</text>
								<image class="goods-icon" mode="scaleToFill" src="/static/vMall/integralIcon.png">
								</image>
							</view>
							<view class="goods-number-box">
								<u-number-box 
								    button-size="26"
								    color="#000"
								    bgColor="#fff"
								    iconStyle="color: #000"
									v-model="goodsNum"
								></u-number-box>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="info-box">
				<view class="section-card">
					<view class="info-item">
						<view class="info-label info-title">商品金额</view>
						<view class="info-value"></view>
					</view>
					<view class="info-item">
						<view class="info-label">V金:</view>
						<view class="info-value">{{priceTotal}}</view>
					</view>
					<view class="info-item">
						<view class="info-label">运费:</view>
						<view class="info-value">¥ {{expressMoney}}</view>
					</view>
					<view class="info-item">
						<view class="info-label"></view>
						<view class="info-value flex-box">
							<view class="total">合计:</view>
							<view class="integral-text">{{totalMoney}}</view>
						</view>
					</view>
					<view class="info-item">
						<view class="info-label"></view>
						<view class="info-value flex-box">
							<view class="total">我的积分:</view>
							<view class="integral-text" :class="{nointegral: exchangeInfo.canExchange==false}">{{integral}}({{integral - totalMoney}})</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部操作菜单 -->
			<view class="page-bottom">
				<view class="goods-price">
					<text>{{totalMoney}}</text>	 
					<image class="goods-icon" mode="scaleToFill" src="/static/vMall/integralIcon.png"></image>
				</view>
				
				<view class="action-btn-group">
					<button type="primary" class=" action-btn no-border buy-now-btn" @click="buyGoods">立即支付</button>
				</view>
			</view>
			
			<!-- // 积分提醒弹窗 -->
			<u-popup :show="showExchange" :round="10" mode="bottom" @close="doClose">
				<view class="exchangePanel">
					<view class="title">积分兑换</view>
					<view class="cost">{{totalMoney}}
						<view class="unit">积分</view>
					</view>
					<view class="detail">
						<view class="userScore" v-if="exchangeInfo.canExchange">当前积分{{integral}}</view>
						<view class="userScore" v-if="!exchangeInfo.canExchange">当前积分不足，请到任务中心获取积分</view>
						<view class="vBtn" @click="doTask">做任务</view>
					</view>
				</view>
			</u-popup>
			<!-- // 积分提醒弹窗 -->
			<u-popup :show="showInput" :round="10" :closeOnClickOverlay="true" mode="bottom" @close="doCloseInput">
				<view class="exchangePanel">
					<view class="title">{{inputTitle}}</view>
					<view class="input-box">
						<u--input
						    placeholder="请输入"
							:prefixIcon="inputIcon"
							:type="inputType"
						    border="surround"
						    v-model="inputVal"
						 ></u--input>
					</view>
					<view class="detail">
						<view class="vBtn" @click="confirmInput">确认修改</view>
					</view>
				</view>
			</u-popup>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: null,
				productId: null,
				expressType: 'express',
				goodsNum: 1,
				stock: 10,
				goodsInfo: {},
				expressMoney: 0,
				userInfo: {},
				address: null,
				selfLiftAddress: {},
				selfLiftInfo: {},
				productInfo: {},
				integral: {},
				showExchange: false,
				exchangeInfo: {
					cost: 0,
					canExchange: false,
					btnText: "做任务"
				},
				showInput: false,
				inputTitle: '修改手机号码',
				inputVal: '',
				inputIcon: 'phone',
				inputType: ''
			}
		},
		computed: {
			priceTotal() {
				return this.productInfo.sellPrice * this.goodsNum
			},
			totalMoney() {
				return this.productInfo.sellPrice * this.goodsNum + this.expressMoney
			}
		},
		watch: {
			goodsNum(val) {
				let cost = Number(this.productInfo.sellPrice * this.goodsNum + this.expressMoney)
				this.exchangeInfo.cost = cost
				if (cost > this.integral) {
					this.exchangeInfo.canExchange = false
				} else {
					this.exchangeInfo.canExchange = true
				}
			}
		},
		onLoad(option) {
			this.goodsId = option.goodsId
			this.productId = option.productId
			console.log(this.goodsId, 'this.productId', this.productId)
			this.getUser().then(info => {
				this.userInfo = info
				this.selfLiftInfo = {
					mobile: this.userInfo.phone,
					consignee: this.userInfo.nickname
				}
				this.$request.get(this.$api.getUserById, {
					id: this.userInfo.id
				}).then(result => {
					this.integral = result.result.integral
					this.getAddress()
					this.getGoodsDetail()
				})
			})
		},
		methods: {
			editAddress(type) {
				if (type == 'consignee') {
					this.inputTitle = '修改提货人'
					this.inputIcon = 'man-add'
					this.inputType = 'text'
					this.inputVal = this.selfLiftInfo.consignee
				} else {
					this.inputTitle = '修改手机号'
					this.inputIcon = 'phone'
					this.inputType = 'number'
					this.inputVal = this.selfLiftInfo.mobile
				}
				this.showInput = true
			},
			confirmInput() {
				if (!this.inputVal) {
					this.$appFunc.msg('请输入内容');
					return;
				}
				if (this.inputIcon == 'phone') {
					if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.inputVal)) {
						this.$appFunc.msg('请输入正确的手机号码');
						return;
					}
					this.selfLiftInfo.mobile = this.inputVal
				} else {
					this.selfLiftInfo.consignee = this.inputVal	
				}
				this.showInput = false
				this.inputVal = ''
				// console.log('this.selfLiftInfo', this.selfLiftInfo)
			},
			doTask() {
				uni.navigateTo({
					url: "/pages/taskCenter/taskCenter"
				})
			},
			doClose() {
				this.showExchange = false
			},
			doCloseInput() {
				this.showInput = false
			},
			goAddress() {
				this.$appFunc.navTo('/pages/address/address?source=1&addressId=' + (this.address?this.address.id:''))
			},
			setExpressType(type) {
				this.expressType = type
			},
			//数量
			numberChange(data){
				this.cartList[data.index].number = data.number;
				this.calcTotal();
			},
			getUser() {
				return new Promise((resolve, reject) => {
					uni.getStorage({
						key: "userInfo",
						success: (res) => {
							let info = res.data;
							resolve(info)
						},
						fail: () => {
							this.$appFunc.msg('获取用户失败')
							reject(null)
						}
					})
				})
			},
			getGoodsDetail() {
				this.$request.get(this.$api.goodsDetail, {
					id: this.goodsId,
					userId: this.userInfo.id
				}).then(res => {
					uni.hideLoading()
					const { success, result } = res
					console.log('doos', result)
					
					if (success) {
						let products = result.products.filter(item => {return item.id == this.productId})
						if (products.length == 0) {
							this.$appFunc.msg('暂无此规格商品, 请重新选择')
							setTimeout(() => {uni.navigateBack()}, 2000)
						}
						products[0].specifications = JSON.parse(products[0].specifications)
						this.productInfo = products[0]
						// console.log('productInfo', this.productInfo, this.productInfo.specifications, typeof this.productInfo.specifications)
						result.pruductIntegral = Number(result.pruductIntegral)
						this.goodsInfo = result
						this.exchangeInfo.canExchange =  this.integral >= Number(this.productInfo.sellPrice)
					}else{
						this.$appFunc.msg('获取商品失败')
					}
				})
			},
			getAddress() {
				this.$request.get(this.$api.defaultAddress, {
					userId: this.userInfo.id
				}).then(res => {
					// 加载状态重置
					uni.hideLoading()
					const { success, result } = res
					if (success) {
						this.address = res.result
					}  else {
						this.goodsList = []
						this.$appFunc.msg('获取地址失败')
					}
				}).catch(err => {
					this.address = null
				})
				this.$request.get(this.$api.getDic, {
					code: 'adress'
				}).then(res => {
					// 加载状态重置
					uni.hideLoading()
					if (res.length > 0) {
						this.selfLiftAddress = res[0]
					}  else {
						this.$appFunc.msg('自提点不存在')
					}
				})
			},
			buyGoods() {
				console.log(this.totalMoney, this.integral)
				if (this.exchangeInfo.canExchange === false) {
					this.showExchange = true
					return
				}
				let address = ''
				let mobile = ''
				let consignee = ''
				let freightType = ''
				if (this.expressType == 'express') {
					if (this.address == null) {
						this.$appFunc.msg('请您先选择收货地址')
						return
					}
					address = this.address.address
					mobile = this.address.mobile
					consignee = this.address.name
					freightType = 0
				} else {
					if (!this.selfLiftInfo.mobile || this.selfLiftInfo.mobile.length < 7) {
						this.$appFunc.msg('请您正确填写联系电话')
						return
					}
					if (!this.selfLiftInfo.consignee || this.selfLiftInfo.consignee.length < 1) {
						this.$appFunc.msg('请您正确填写提货人姓名')
						return
					}
					if (!this.selfLiftAddress || this.selfLiftAddress.value.length < 5) {
						this.$appFunc.msg('暂无可用的自提点地址')
						return
					}
					
					address = this.selfLiftAddress.value
					mobile = this.selfLiftInfo.mobile || this.userInfo.phone
					consignee = this.selfLiftInfo.consignee || this.userInfo.nickname
					freightType = 1
				}
				const data = {
				  address,
				  consignee,
				  exchangeType: 5,
				  freightPrice: 0,
				  freightType,// 0-快递 1-自提
				  integral: this.totalMoney,
				  actualPrice: this.totalMoney,
				  mobile,
				  number: this.goodsNum,
				  otherId: this.goodsId,
				  userId: this.userInfo.id,
				  goodsProductId: this.productInfo.id
				}
				let _this = this
				uni.showModal({
					title: '兑换提示',
					content: '请您确认兑换商品, 地址：' + address,
					success: function (res) {
						if (res.confirm) {
							_this.$request.post(_this.$api.buyGoods, data).then(res => {
								// 加载状态重置
								uni.hideLoading()
								const { success, result } = res
								console.log('buy result', res)
								if (success) {
									uni.showModal({
										title: '兑换成功',
										content: '恭喜您兑换商品成功',
										showCancel: false,
										confirmText: '查看订单',
										success: function (res) {
											if (res.confirm) {
												uni.redirectTo({
													url: '/pages/orderDetail/orderDetail?id='+result+'&from=goods'
												})
											}
										}
									});
								}  else {
									uni.showModal({
										title: '积分不足',
										content: '前往任务中心, 可获取更多积分',
										showCancel: false,
										success: function (res) {
											if (res.confirm) {
												uni.navigateTo({
													url: '/pages/taskCenter/taskCenter'
												})
											}
										}
									});
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "@/style/variable.scss";

	.confirmOrderPage {
		.goods-wrapper {
			padding: 15rpx;

			.express-type-wrapper {
				width: 100%;

				.express-type {
					position: relative;
					width: 100%;
					height: 264rpx;

					.address-bgimg {
						width: 100%;
						height: 264rpx;
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						z-index: 0;
					}

					.titles {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						padding-top: 20rpx;
						position: relative;
						z-index: 1;

						.ltitle,
						.rtitle {
							width: 50%;
							line-height: 60rpx;
							text-align: center;
						}
					}

					.address {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						height: 180rpx;
						padding: 20rpx 30px;
						box-sizing: border-box;
						align-items: center;
						position: relative;
						z-index: 1;

						.address-icon {
							width: 55rpx;
							height: 55rpx;
							margin-right: 30rpx;
							flex-shrink: 0;
						}

						.address-desc {
							font-size: $uni-font-size-sm;
							flex-grow: 1;
							.desc-text+.desc-text {
								margin-top: 30rpx;
							}
							&.address-self {
								.desc-text {
									display: flex;
									flex-direction: row;
									flex-wrap: nowrap;
								}
								.desc-text+.desc-text {
									margin-top: 10rpx;
								}
							}
						}

						.icon-box {}
					}
				}

				.express-type {
					.ltitle {
						font-size: $uni-font-size-lg;
						color: #000;
					}

					.rtitle {
						font-size: $uni-font-size-sm;
						color: #999999;
					}
				}

				.express-type.self-lift {
					.ltitle {
						font-size: $uni-font-size-sm;
						color: #999999;
					}

					.rtitle {
						font-size: $uni-font-size-lg;
						color: #000;
					}
				}
			}

			.goods-box {
				padding: 16rpx;
			}

			.g-item {
				display: flex;
				@include myCard;
				padding: 30rpx;

				image {
					flex-shrink: 0;
					display: block;
					width: 140rpx;
					height: 140rpx;
					border-radius: 4rpx;
				}

				.right {
					flex: 1;
					padding-left: 24rpx;
					overflow: hidden;
				}

				.title {
					font-size: $my-font-base;
					color: $font-color-dark;
				}

				.spec {
					font-size: 26rpx;
					color: $font-color-light;
				}

				.price-box {
					display: flex;
					align-items: baseline;
					height: 64rpx;
					padding: 10rpx 0;
					font-size: 26rpx;
					color: $uni-color-primary;
					justify-content: space-between;
					.goods-price {
						font-weight: bold;
						color: #398ade;
						text-align: right;
						display: flex;
						height: 60rpx;
						align-items: center;
						flex-direction: row;
						justify-content: flex-end;
						font-size: 36rpx;
						flex-grow: 0;
					}

					.goods-number-box {
						flex-grow: 0;
						text-align: right;
						color: $font-color-light;
						.u-number-box {
							/deep/ .u-number-box__minus--disabled {
							}
							/deep/ .u-number-box__minus {
								border: 1px solid #909399;
								border-top-left-radius: 16rpx;
								border-bottom-left-radius: 16rpx;
								background-color: #fff !important;
								color: '#f7f8fa';
							}
							/deep/ .u-number-box__input {
								border-top: 1px solid #909399;
								border-bottom: 1px solid #909399;
								margin: 0px;
							}
							/deep/ .u-number-box__plus {
								border: 1px solid #909399;
								border-top-right-radius: 16rpx;
								border-bottom-right-radius: 16rpx;
							}
						}
						.goods-number {
							width: 150rpx;
							height: 26rpx;
							border-radius: 30rpx;
							border: 1px solid #333333;
						}
					}

					.goods-icon {
						width: 30rpx;
						height: 30rpx;
						margin-left: 12rpx;
					}
				}

				.step-box {
					position: relative;
				}
			}
			
			.info-box {
				padding: 16rpx;
				margin-bottom: 140rpx;
				.section-card {
					@include myCard;
					padding: 30rpx;
					.info-item {
						@include myFlex;
						padding: 20rpx;
						font-size: $my-font-base;
						.info-label {
							width: 150rpx;
							text-align: left;
							
							&.info-title {
								font-size: $my-font-lg;
								font-weight: bold;
							}
						}
						.info-value {
							flex-grow: 1;
							text-align: right;
							
						}
						.flex-box {
							@include myFlex;
							line-height: 1;
							justify-content: flex-end;
							.total {
								margin-right: 20rpx
							}
							
						}
						.integral-text {
							@include myIntegral;
							font-weight: bold;
							&.nointegral {
								color: red;
							}
						}
					}
				}
			}
		}
		/* 底部操作菜单 */
		.page-bottom{
			position:fixed;
			left: 0rpx;
			bottom:0rpx;
			z-index: 95;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 750rpx;
			height: 130rpx;
			padding: 0rpx 30rpx;
			box-sizing: border-box;
			background: rgba(255,255,255,1);
			box-shadow: 0 0 10rpx 0 rgba(0,0,0,.3);
			border-radius: 0rpx;
			.goods-price {
				font-weight: bold;
				color: #398ade;
				text-align: right;
				display: flex;
				height: 60rpx;
				align-items: center;
				flex-direction: row;
				justify-content: flex-end;
				font-size: 50rpx;
				flex-grow: 0;
			}
			.goods-sale {
				flex-grow: 1;
				text-align: right;
				color: $font-color-light;
			}
			.goods-icon {
				width: 48rpx;
				height: 48rpx;
				margin-left: 12rpx;
			}
			.p-b-btn{
				display:flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: $font-sm;
				color: $font-color-base;
				width: 96rpx;
				height: 80rpx;
				.yticon{
					font-size: 40rpx;
					line-height: 48rpx;
					color: $font-color-light;
				}
				&.active, &.active .yticon{
					color: $uni-color-primary;
				}
				.icon-fenxiang2{
					font-size: 42rpx;
					transform: translateY(-2rpx);
				}
				.icon-shoucang{
					font-size: 46rpx;
				}
			}
			.action-btn-group{
				display: flex;
				height: 76rpx;
				border-radius: 4rpx;
				overflow: hidden;
				box-shadow: 0 20rpx 40rpx -16rpx #fa436a;
				box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
				background: #3c9cff;
				margin-left: 20rpx;
				position:relative;
				&:after{
					content: '';
					position:absolute;
					top: 50%;
					right: 50%;
					transform: translateY(-50%);
					height: 28rpx;
					width: 0;
					border-right: 1px solid rgba(255,255,255,.5);
				}
				.action-btn{
					display:flex;
					align-items: center;
					justify-content: center;
					width: 180rpx;
					height: 100%;
					font-size: $font-base ;
					padding: 0;
					border-radius: 0;
					background: transparent;
				}
			}
		}
		
		.exchangePanel {
			display: flex;
			text-align: center;
			flex-direction: column;
		
			.title {
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				font-size: 28rpx;
				border-bottom: 1rpx solid #eee;
				height: 100rpx;
				line-height: 100rpx;
			}
		
			.cost {
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				font-size: 46rpx;
				color: #EC6C2FFF;
				display: flex;
				flex-wrap: nowrap;
				justify-content: center;
				border-bottom: 1rpx solid #eee;
				height: 100rpx;
				line-height: 100rpx;
		
				.unit {
					font-size: 24rpx;
					position: relative;
					top: 6rpx;
					left: 2rpx;
					color: #333333FF;
				}
			}
			.input-box {
				padding: 50rpx 30rpx;
			}
			.detail {
				line-height: 100rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				padding-bottom: 40rpx;
		
				.userScore {
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					font-size: 30rpx;
				}
		
				.vBtn {
					background: linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
					border-radius: 48rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					font-size: 34rpx;
					height: 96rpx;
					width: 680rpx;
				}
			}
		}
	}
</style>
